import { css } from 'solid-styled-components';
import { EditorModel } from './EditorModel';
import Choice from '../../Choice/Choice';


interface ToolBarProps {
  editorFrame: HTMLIFrameElement;
  model: EditorModel;
}

export function ToolBar(props: ToolBarProps) {
  const model = props.model;
  return (
    <div class={styleClass}>
      <Button selected={model.state.canUndo} title='撤销' onclick={() => model.undo()} />
      <Button selected={model.state.canRedo} title='重做' onclick={() => model.redo()} />

      <Button selected={model.state.bold} title='加粗' onclick={() => model.bold()} />
      <Button selected={model.state.italic} title='斜体' onclick={() => model.italic()} />
      <Button selected={model.state.strikeThrough} title='删除线' onclick={() => model.strikeThrough()} />
      <Button selected={model.state.underLine} title='下划线' onclick={() => model.underLine()} />

      <Button selected={model.state.justifyLeft} title='居左' onclick={() => model.justifyLeft()} />
      <Button selected={model.state.justifyCenter} title='居中' onclick={() => model.justifyCenter()} />
      <Button selected={model.state.justifyRight} title='居右' onclick={() => model.justifyRight()} />

      <Button
        selected={false}
        title='save'
        onclick={() => {
          const co = new Choice(model['document']);
          const se = co.getSelection();
          console.log(co.getSelection())
          setTimeout(() => {
            co.restore(se!)
          }, 3000);
        }}
      />
    </div>
  );
}



interface ButtonProps {
  title: string;
  selected?: boolean;
  onclick?: (ev: MouseEvent) => void;
}
function Button(props: ButtonProps) {
  return (
    <div class='toolbar-btn' classList={{ selected: props.selected }} onmousedown={(ev) => ev.preventDefault()} onclick={props.onclick}>
      {props.title}
    </div>
  );
}

const styleClass = css`
  height: 48px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  .toolbar-btn {
    /* width: 32px; */
    height: 32px;
    border: 1px solid gray;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    padding: 0 4px;
    cursor: pointer;
    &:hover {
      background-color: #ecf4fd;
    }
    &.selected {
      border-color: red;
      background-color: #ffe7e7;
    }
  }
`;
